<template>
    <el-container>

        <el-container>
            <!-- Aside -->

            <el-aside width="230px" style="height: 100%;">

                <div style="height:840px">

                    <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#545c64"
                        text-color="#fff" active-text-color="#ffd04b" :default-openeds="['1']">
                        <el-menu-item index="4">
                            <!-- <i class="el-icon-setting"></i>
                            <span slot="title">导航四</span> -->
                            <div style="padding-right:70px;">
<!--                                <el-avatar :src="admin[0].userFace"></el-avatar>-->
                              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                                <span>{{admin[0].name}}</span>
                                <!-- <span>{{admin[0].userFace}}</span> -->
                                <span @click=" getOut" style="padding-left: 10px;cursor: pointer;">退出</span>

                            </div>

                        </el-menu-item>
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>管理模块</span>
                            </template>
                            <el-menu-item-group>
                                <!-- <template slot="title">分组一</template> -->
                                <el-menu-item @click="getAllPosition" index="1-1">职位管理</el-menu-item>
                                <el-menu-item index="1-2" @click="getEmployees">员工管理</el-menu-item>
                            </el-menu-item-group>
                            <!-- <el-menu-item-group title="分组2"> -->
                            <el-menu-item index="1-3" @click="getDepartments">部门管理</el-menu-item>
<!--                            </el-menu-item-group>-->
<!--                            <el-submenu index="1-4">-->
<!--                                <template slot="title"></template>-->
<!--                                <el-menu-item index="1-4-1">待开发</el-menu-item>-->
<!--                            </el-submenu>-->
                        </el-submenu>
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span slot="title">未完待续</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-document"></i>
                            <span slot="title">尽请期待</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">努力!!!!</span>
                        </el-menu-item>

                    </el-menu>

                </div>

            </el-aside>
            <!-- Main -->
            <el-main>
                <!-- Head 标题栏 -->
                <!-- <el-header style="height: 80px;">
                    <div style="padding-top: 18px;">
                        <img class="title" src="../assets/tittle.png" style="height: 50px;">
                    </div>
                </el-header> -->
                <div id="mainCotain">
                    <!-- 表 -->
                    <!--  表结构----------------》职位信息表 -->
                    <template v-if="positions.length!=0">
                        <el-table :data="positions.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))
                        .slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                            style="width: 100%;line-height: 50px;">
                            <el-table-column label="职位编号" prop="id">
                            </el-table-column>
                            <el-table-column label="职位名称" prop="name">
                            </el-table-column>
                            <el-table-column align="right" width="280px">

                                <template slot="header" slot-scope="scope">

                                    <el-input v-model="search" style="width: 150px;" size="mini" placeholder="输入职位搜索" />
                                    <el-button @click="drawerAdd = true" type="success" size="mini"
                                        style="margin-left: 16px;">
                                        添加职位
                                    </el-button>
                                </template>
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                                    <el-button size="mini" type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <!-- 分页 -->
                        <div class="block">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="currentPage" :page-sizes="[4,8]" :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper" :total="positions.length" />
                        </div>


                    </template>
                    <!--  表结构----------------》员工信息表 -->
                    <template v-if="employees.length!=0">
                        <el-table :data="employees.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))
                        .slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                            style="width: 100%;line-height: 50px;">
                            <el-table-column label="编号" prop="id">
                            </el-table-column>
                            <el-table-column label="名字" prop="name">
                            </el-table-column>
                            <el-table-column label="性别" prop="gender">
                            </el-table-column>
                            <el-table-column label="生日" prop="birthday">
                            </el-table-column>
                            <el-table-column label="邮箱" prop="email">
                            </el-table-column>
                            <el-table-column label="电话" prop="phone">
                            </el-table-column>
                            <el-table-column label="地址" prop="address">
                            </el-table-column>
                            <el-table-column label="职位" prop="pname">
                            </el-table-column>
                            <el-table-column label="部门" prop="dname">
                            </el-table-column>
                            <el-table-column align="right" width="280px">

                                <template slot="header" slot-scope="scope">

                                    <el-input v-model="search" style="width: 150px;" size="mini" placeholder="输入名字搜索" />
                                    <el-button @click="drawerAddEmp = true" type="success" size="mini"
                                        style="margin-left: 16px;">
                                        添加员工
                                    </el-button>
                                </template>
                                <template slot-scope="scope">
                                    <el-button size="mini"
                                        @click="handleEditEmp(scope.$index, scope.row)">Edit</el-button>
                                    <el-button size="mini" type="danger"
                                        @click="handleDeleteEmp(scope.$index, scope.row)">Delete</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 分页 -->
                        <div class="block">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="currentPage" :page-sizes="[4,8]" :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper" :total="employees.length" />
                        </div>
                    </template>


                    <!--  表结构----------------》部门信息表 -->
                    <template v-if="departments.length!=0">
                        <el-table :data="departments.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))
                        .slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                            style="width: 100%;line-height: 50px;">
                            <!-- <el-table-column label="ID" prop="id">
                            </el-table-column> -->
                            <el-table-column label="部门编号" prop="id">
                            </el-table-column>
                            <el-table-column label="部门名称" prop="name">
                            </el-table-column>
                            <el-table-column align="right" width="280px">

                                <template slot="header" slot-scope="scope">

                                    <el-input v-model="search" style="width: 150px;" size="mini"
                                        placeholder="输入部门名称搜索" />
                                    <el-button @click="drawerAddDept = true" type="success" size="mini"
                                        style="margin-left: 16px;">
                                        创建部门
                                    </el-button>
                                </template>
                                <template slot-scope="scope">
                                    <el-button size="mini"
                                        @click="handleEditDept(scope.$index, scope.row)">Edit</el-button>
                                    <el-button size="mini" type="danger"
                                        @click="handleDeleteDept(scope.$index, scope.row)">Delete</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 分页 -->
                        <div class="block">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="currentPage" :page-sizes="[4,8]" :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper" :total="departments.length" />
                        </div>
                    </template>




                    <!-- ----------------------------》职位表的功能项 -->
                    <!-- 修改职位弹出框 -->
                    <el-dialog title="职位信息" :visible.sync="dialogFormEdit" width="35%"
                        style="line-height: 30px;padding-left: 20px;" @close="handleClose">

                        <div style="height: 180px;line-height: 30px;">
                            <el-form :model="position">
                                <el-form-item label="职位编号" :label-width="formLabelWidth">
                                    <el-input v-model="position.id"></el-input>
                                </el-form-item>
                                <el-form-item label="职位名称" :label-width="formLabelWidth">
                                    <el-input v-model="position.name"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="cancelEdit()">取 消</el-button>
                                <el-button type="primary" @click="submitEdit">确 定</el-button>
                            </div>
                        </div>

                    </el-dialog>

                    <!-- 删除职位弹出框 -->
                    <el-dialog title="提示" :visible.sync="dialogDelete" width="30%" :before-close="handleClose"
                        @close="handleClose" style="line-height: 30px;padding-left: 20px;">
                        <span>确认删除{{this.position.name}}职位？</span>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click=" cancelDelete()">取 消</el-button>
                            <el-button type="primary" @click="submitDelete">确 定</el-button>
                        </span>
                    </el-dialog>

                    <!-- 添加职位抽屉 -->
                    <el-drawer :visible.sync="drawerAdd" direction="ltr" custom-class="demo-drawer" @close="handleClose"
                        ref="drawer">
                        <div class="demo-drawer__content">
                            <el-form :model="position">
<!--                                <el-form-item label="职位编号" :label-width="formLabelWidth">-->
<!--                                    <el-input v-model="position.id" autocomplete="off" style="width: 80%;"></el-input>-->
<!--                                </el-form-item>-->
                                <el-form-item label="职位名称" :label-width="formLabelWidth">
                                    <el-input v-model="position.name" autocomplete="off" style="width: 80%;"></el-input>
                                </el-form-item>
                            </el-form>
                            <div class="demo-drawer__footer">
                                <el-button @click="cancelForm">取 消</el-button>
                                <!-- <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{
                                    loading ? '提交中 ...' : '确 定' }}</el-button> -->
                                <el-button type="primary" @click="addPosition" :loading="loading">{{
                                    loading ? '提交中 ...' : '确 定' }}</el-button>
                            </div>
                        </div>
                    </el-drawer>


                    <!-- ----------------------------》员工表的功能项 -->
                    <!-- 修改员工信息弹出框 -->
                    <el-dialog title="员工信息" :visible.sync="dialogFormEditEmp" width="35%" @close="handleClose"
                        style="line-height: 30px;padding-left: 20px;">

                        <div style="height: 400px;line-height: 30px;">
                            <el-form :model="employee">
                                <div style="display: flex;">
                                    <el-form-item label="名字" :label-width="formLabelWidth">
                                        <el-input v-model="employee.name"></el-input>
                                    </el-form-item>
                                    <el-form-item label="性别" :label-width="formLabelWidth">
                                        <el-input v-model="employee.gender"></el-input>
                                    </el-form-item>
                                </div>

                                <el-form-item label="生日" :label-width="formLabelWidth">
                                    <div class="block" style="display: flex;">
                                        <el-date-picker v-model="employee.birthday" type="date" placeholder="选择日期">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>

                                <el-form-item label="邮箱" :label-width="formLabelWidth">
                                    <el-input v-model="employee.email"></el-input>
                                </el-form-item>
                                <el-form-item label="电话" :label-width="formLabelWidth">
                                    <el-input v-model="employee.phone"></el-input>
                                </el-form-item>
                                <el-form-item label="地址" :label-width="formLabelWidth">
                                    <el-input v-model="employee.address"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormEdit = false">取 消</el-button>
                                <el-button type="primary" @click="submitEdit">确 定</el-button>
                            </div>
                        </div>

                    </el-dialog>

                    <!-- 删除员工信息弹出框 -->
                    <el-dialog title="提示" :visible.sync="dialogDeleteEmp" width="30%" :before-close="handleClose"
                        @close="handleClose" style="line-height: 30px;padding-left: 20px;">
                        <span>确认删除{{this.employee.name}}员工信息？</span>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogDeleteEmp = false">取 消</el-button>
                            <el-button type="primary" @click="submitDeleteEmp">确 定</el-button>
                        </span>
                    </el-dialog>

                    <!-- 添加员工信息抽屉 -->
                    <el-drawer :visible.sync="drawerAddEmp" direction="ltr" @close="handleClose"
                        custom-class="demo-drawer" ref="drawer">
                        <div class="demo-drawer__content">
                            <el-form :model="employee">
                                <div style="display: flex;">
                                    <el-form-item label="名字" :label-width="formLabelWidth">
                                        <el-input v-model="employee.name"></el-input>
                                    </el-form-item>
                                    <el-form-item label="性别" :label-width="formLabelWidth">
                                        <el-input v-model="employee.gender"></el-input>
                                    </el-form-item>
                                </div>

                                <el-form-item label="生日" :label-width="formLabelWidth">
                                    <div class="block" style="display: flex;">
                                        <el-date-picker v-model="employee.birthday" type="date" placeholder="选择日期">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>

                                <el-form-item label="邮箱" :label-width="formLabelWidth">
                                    <el-input v-model="employee.email"></el-input>
                                </el-form-item>
                                <el-form-item label="电话" :label-width="formLabelWidth">
                                    <el-input v-model="employee.phone"></el-input>
                                </el-form-item>
                                <el-form-item label="地址" :label-width="formLabelWidth">
                                    <el-input v-model="employee.address"></el-input>
                                </el-form-item>
                                <el-form-item label="部门id" :label-width="formLabelWidth">
                                    <el-input v-model="employee.departmentId"
                                        placeholder="1,2,3,4,5,6,7,8,9,10,11"></el-input>
                                </el-form-item>
                                <el-form-item label="职位id" :label-width="formLabelWidth">
                                    <el-input v-model="employee.posId" placeholder="1,2,3,4,5,11"></el-input>
                                </el-form-item>
                            </el-form>
                            <div class="demo-drawer__footer">
                                <el-button @click="cancelForm">取 消</el-button>
                                <!-- <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{
                                 loading ? '提交中 ...' : '确 定' }}</el-button> -->
                                <el-button type="primary" @click="addEmployee" :loading="loading">{{
                                    loading ? '提交中 ...' : '确 定' }}</el-button>
                            </div>
                        </div>
                    </el-drawer>


                    <!-- ----------------------------》部门表的功能项 -->
                    <!-- 修改部门弹出框 -->
                    <el-dialog title="部门信息" :visible.sync="dialogFormEditDept" width="35%"
                        style="line-height: 30px;padding-left: 20px;" @close="handleClose">

                        <div style="height: 180px;line-height: 30px;">
                            <el-form :model="department">
<!--                                <el-form-item label="部门编号" :label-width="formLabelWidth">-->
<!--                                    <el-input v-model="department.id"></el-input>-->
<!--                                </el-form-item>-->
                                <el-form-item label="部门名称" :label-width="formLabelWidth">
                                    <el-input v-model="department.name"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="cancelEdit()">取 消</el-button>
                                <el-button type="primary" @click="uodateDept">确 定</el-button>
                            </div>
                        </div>

                    </el-dialog>

                    <!-- 删除职位弹出框 -->
                    <el-dialog title="提示" :visible.sync="dialogDeleteDept" width="30%" :before-close="handleClose"
                        @close="handleClose" style="line-height: 30px;padding-left: 20px;">
                        <span>确认删除{{this.department.name}}部门？</span>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click=" cancelDeleteDept()">取 消</el-button>
                            <el-button type="primary" @click="submitDeleteDept">确 定</el-button>
                        </span>
                    </el-dialog>

                    <!-- 添加部门抽屉 -->
                    <el-drawer :visible.sync="drawerAddDept" direction="ltr" custom-class="demo-drawer"
                        @close="handleClose" ref="drawer">
                        <div class="demo-drawer__content">
                            <el-form :model="department">
                                <!-- <el-form-item label="部门编号" :label-width="formLabelWidth">
                                    <el-input v-model="department.id" autocomplete="off" style="width: 80%;"></el-input>
                                </el-form-item> -->
                                <el-form-item label="部门名称" :label-width="formLabelWidth">
                                    <el-input v-model="department.name" autocomplete="off"
                                        style="width: 80%;"></el-input>
                                </el-form-item>
                            </el-form>
                            <div class="demo-drawer__footer">
                                <el-button @click="cancelForm">取 消</el-button>
                                <!-- <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{
                                    loading ? '提交中 ...' : '确 定' }}</el-button> -->
                                <el-button type="primary" @click="addDept" :loading="loading">{{
                                    loading ? '提交中 ...' : '确 定' }}</el-button>
                            </div>
                        </div>
                    </el-drawer>



                </div>

            </el-main>
        </el-container>
    </el-container>
</template>
<script>
    export default {
        data() {
            return {
                //返回的R结果集
                R: {},
                //搜索框
                search: '',
                //职位信息
                positions: [],
                position: {
                    id: '',
                    name: ""
                },
                //弹窗状态
                dialogFormEdit: false,
                dialogDelete: false,
                formLabelWidth: '150px',
                //抽屉样式
                drawerAdd: false,
                loading: false,
                formLabelWidth: '80px',
                timer: null,
                //分页参数
                currentPage: 1,//表示当前页号
                pageSize: 8,//每页要显示的订单数量

                //员工信息
                employees: [],
                employee: {
                    name: "",
                    gender: "",
                    birthday: "",
                    email: "",
                    phone: "",
                    address: ""
                },
                dialogFormEditEmp: false,
                dialogDeleteEmp: false,
                //抽屉
                drawerAddEmp: false,


                //部门信息
                departments: [],
                department: {
                    id: "",
                    name: "",
                },
                dialogFormEditDept: false,
                dialogDeleteDept: false,
                //抽屉
                drawerAddDept: false,

                //cookie
                username: "",
                admin: [],
            }
        },
        computed: {
            adminImage() {
                return this.admin[0].userFace;
            }
        },
        methods: {
            //监听关闭事件
            handleClose() {
                this.dialogFormEdit = false;
                this.dialogDelete = false;
                this.dialogDeleteEmp = false;
                this.dialogFormEditEmp = false;
                this.dialogFormEditDept = false;
                this.dialogDeleteDept = false;

                this.position = {};
                this.employee = {};
                this.department = {};

            },
            //------------》查询职位功能
            //查询所有职位表
            getAllPosition() {
                this.currentPage = 1;
                this.employees = [];
                this.departments = [];
                this.$axios
                    .get('pos/getall')
                    .then(res => {
                        this.positions = res.data;
                        console.log(this.positions)
                    })
                    .catch(err => {
                        alert(err);
                    })
            },

            //---------》弹窗修改功能
            //弹窗数据处理
            handleEdit(index, row) {
                // console.log(index, row);
                this.dialogFormEdit = true,
                    this.position.id = row.id;
                this.position.name = row.name;
            },
            //确认修改
            submitEdit() {
                this.dialogFormEdit = false,
                    this.$axios
                        .post('pos/update', this.position)
                        .then(res => {
                            this.R = res.data;
                            console.log(this.R);
                            if (this.R.data == "修改成功") {
                                this.$message({
                                    message: this.R.data,
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: this.R.data,
                                    type: 'error'
                                });
                            }
                            this.position.name = '',
                                this.position.id = '',
                                this.getAllPosition();

                        })
                        .catch(err => {
                            alert(err)
                        })
            },
            //取消修改
            cancelEdit() {
                this.dialogFormEdit = false;
                this.position = {};
            },
            //-------------》删除职位功能
            handleDelete(index, row) {
                // console.log(index, row);
                this.position = row;
                this.dialogDelete = true;
            },
            submitDelete() {
                this.$axios
                    .delete('pos/delete/' + this.position.id)
                    .then(res => {
                        this.R = res.data;
                        console.log(this.R);
                        if (this.R.data == "删除成功！！！") {
                            this.$message({
                                message: this.R.data,
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: this.R.data,
                                type: 'error'
                            });
                        }
                        this.dialogDelete = false;
                        this.getAllPosition();
                        this.currentPage = 1;

                    })
            },
            //取消删除
            cancelDelete() {
                this.dialogDelete = false;
                this.position = {};
            },
            // --------------->抽屉---》添加职位
            cancelForm() {
                this.loading = false;
                this.drawerAdd = false;
                clearTimeout(this.timer);
            },
            addPosition() {
                console.log("添加职位")
                this.$axios
                    .put('pos/add', this.position)
                    .then(res => {
                        this.R = res.data;
                        console.log(this.R);

                        if (this.R.data == "添加成功") {
                            this.$message({
                                message: this.R.data,
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: this.R.data,
                                type: 'error'
                            });
                        }
                        this.getAllPosition();
                        this.position.id = '';
                        this.position.name = '';
                        this.drawerAdd = false;
                    })


            },

            //分页
            //1-3 分页插件参数配置
            handleCurrentChange(pageNum) {
                this.currentPage = pageNum;
            },
            handleSizeChange(size) {
                this.pageSize = size;
                this.currentPage = 1; // 切换每页显示数量时重置当前页码为第一页
            },



            // ---------------------》员工表
            getEmployees() {
                this.currentPage = 1;
                this.positions = [];
                this.departments = [];
                this.$axios
                    .get('employee/query')
                    .then(res => {
                        console.log("data:" + res.data)
                        this.employees = res.data;
                        console.log(this.employees)
                    })
                    .catch(err => {
                        alert(err)
                    })

            },
            //弹窗数据处理
            handleEditEmp(index, row) {
                console.log(index, row);
                this.dialogFormEditEmp = true;
                this.employee = row;
            },
            //确认修改
            submitEditEmp() {
                this.dialogFormEditEmp = false,
                    this.$axios
                        .post('employee/update', this.employee)
                        .then(res => {
                            this.R = res.data;
                            console.log(this.R);
                            if (this.R.data == "修改成功") {
                                this.$message({
                                    message: this.R.data,
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: this.R.data,
                                    type: 'error'
                                });
                            }
                            this.employee = [],
                                this.getEmployees();

                        })
                        .catch(err => {
                            alert(err)
                        })
            },
            //-------------》删除职位功能
            handleDeleteEmp(index, row) {
                // console.log(index, row);
                this.employee = row;
                this.dialogDeleteEmp = true;
            },
            submitDeleteEmp() {
                this.$axios
                    .delete('employee/delete/' + this.employee.id)
                    .then(res => {
                        this.R = res.data;
                        console.log(this.R);
                        if (this.R.data == "删除成功！！！") {
                            this.$message({
                                message: this.R.data,
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: this.R.data,
                                type: 'error'
                            });
                        }
                        this.dialogDeleteEmp = false;
                        this.getEmployees();
                        this.currentPage = 1;
                    })
            },
            // --------------->抽屉---》添加员工
            cancelForm() {
                this.loading = false;
                drawerAddEmp = false;
                clearTimeout(this.timer);
            },
            addEmployee() {
                this.$axios
                    .post('employee/save', this.employee)
                    .then(res => {
                        this.R = res.data;
                        console.log(this.R);

                        if (this.R.data == "添加成功") {
                            this.$message({
                                message: this.R.data,
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: this.R.data,
                                type: 'error'
                            });
                        }
                        this.getEmployees();
                        this.employee = {};
                        this.drawerAddEmp = false;
                    })


            },



            //-----------------------》部门表
            getDepartments() {
                this.currentPage = 1;
                this.positions = [];
                this.employees = [];
                this.$axios
                    .get('department/query')
                    .then(res => {
                        console.log("data:" + res.data.data)
                        this.departments = res.data.data;
                        // console.log(this.employees)
                    })
                    .catch(err => {
                        alert(err)
                    })
            },

            //增加   or   修改 部门表
            //弹窗数据处理
            handleEditDept(index, row) {
                console.log(index, row);
                this.dialogFormEditDept = true;
                this.department = row;
            },
            //修改 操作
            uodateDept() {
                this.$axios
                    .post('department/save', this.department)
                    .then(res => {
                        this.R = res.data;
                        console.log(this.R);
                        if (this.R.data == "操作失败") {
                            this.$message({
                                message: this.R.data,
                                type: 'error'
                            });

                        } else {
                            this.$message({
                                message: "修改成功",
                                type: 'success'
                            });
                        }
                        this.department = [],
                            this.dialogFormEditDept = false;
                        this.getDepartments();

                    })
                    .catch(err => {
                        alert(err)
                    })
            },
            //添加 操作
            addDept() {
                this.$axios
                    .post('department/save', this.department)
                    .then(res => {
                        this.R = res.data;
                        console.log(this.R);
                        if (this.R.data == "操作失败") {
                            this.$message({
                                message: this.R.data,
                                type: 'error'
                            });

                        } else {
                            this.$message({
                                message: "创建成功",
                                type: 'success'
                            });
                        }
                        this.department = [],
                            this.drawerAddDept = false;
                        this.getDepartments();

                    })
                    .catch(err => {
                        alert(err)
                    })
            },
            //-------------》删除部门功能
            handleDeleteDept(index, row) {
                // console.log(index, row);
                this.department = row;
                this.dialogDeleteDept = true;
            },
            submitDeleteDept() {
                this.$axios
                    .delete('department/delete/' + this.department.id)
                    .then(res => {
                        this.R = res.data;
                        console.log(this.R);
                        if (this.R.data == "删除失败~") {
                            this.$message({
                                message: this.R.data,
                                type: 'error'
                            });

                        } else {
                            this.$message({
                                message: this.R.data,
                                type: 'success'
                            });
                        }
                        this.dialogDeleteDept = false;
                        this.getDepartments();
                        this.currentPage = 1;

                    })
            },
            //取消删除
            cancelDeleteDept() {
                this.dialogDeleteDept = false;
                this.department = {};
            },

            //查询用户信息
            getAdminByUserName() {
                this.$axios
                    .get('/admin/getAdminByUserName/' + this.username)
                    .then(res => {
                        this.admin = res.data;
                    })
                    .catch((err) => {
                        alert(err)
                    })

            },
            //退出功能实现
            getOut() {
                this.admin = [];
                this.$router.push('/');
            }

        },

        created() {
            this.username = this.$route.query.username;
            this.getAdminByUserName(this.username);
            console.log(this.username)
        }
    }
</script>
<style scoped>
    .el-header {
        /* background-color: black; */
        background-color: rgb(160, 160, 160);
        color: #333;
        text-align: center;
        line-height: 80px;
    }

    .el-aside {
        background-color: rgb(84, 92, 100);
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
        margin: 0px;
        padding: 0px;
    }
</style>
